<template>
  <!-- 遮罩层容器，当visible为true时显示，点击遮罩层可关闭对话框 -->
  <div class="edit-dialog-overlay" v-if="visible" @click.self="closeDialog">
    <!-- 对话框主体 -->
    <div class="edit-dialog">
      <!-- 对话框头部，包含标题和关闭按钮 -->
      <div class="dialog-header">
        <h3>{{ dialogType === 'edit' ? '编辑' : '添加' }}国际化信息</h3>
        <!-- 关闭按钮 -->
        <el-button type="text" @click="closeDialog">
          <el-icon><Close /></el-icon>
        </el-button>
      </div>
      <!-- 对话框内容区域，包含表单 -->
      <div class="dialog-content">
        <el-form :model="formData" label-width="120px">
          <!-- 语言标签输入项 -->
          <el-form-item label="语言标签">
            <el-input v-model="formData.language_tag" />
          </el-form-item>
          <!-- 国际化标识输入项 -->
          <el-form-item label="国际化标识">
            <el-input v-model="formData.code" />
          </el-form-item>
          <!-- 文本值输入项，使用文本域 -->
          <el-form-item label="文本值">
            <el-input v-model="formData.message" type="textarea" :rows="4" />
          </el-form-item>
          <!-- 备注输入项 -->
          <el-form-item label="备注">
            <el-input v-model="formData.remarks" />
          </el-form-item>
        </el-form>
      </div>
      <!-- 对话框底部，包含取消和保存按钮 -->
      <div class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="saveChanges">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 导入Vue相关函数和图标组件
import { ref, reactive, defineEmits, defineProps } from 'vue'
import { Close } from '@element-plus/icons-vue'

// 定义 props
const props = defineProps({
  refreshList: {
    type: Function,
    default: () => {}
  }
})

// 控制遮罩层显示/隐藏
const visible = ref(false)
// 对话框类型：edit 或 add
const dialogType = ref('edit')

// 表单数据
const formData = reactive({
  id: '',
  language_tag: '',
  code: '',
  message: '',
  remarks: '',
  created_at: ''
})

// 定义事件
const emit = defineEmits(['save'])

// 打开编辑遮罩层
const showEditDialog = (rowData: any) => {
  dialogType.value = 'edit'
  Object.assign(formData, rowData)
  visible.value = true
}

// 打开添加遮罩层
const showAddDialog = () => {
  dialogType.value = 'add'
  // 清空表单数据
  Object.assign(formData, {
    language_tag: '',
    code: '',
    message: '',
    remarks: ''
  })
  visible.value = true
}

// 关闭遮罩层
const closeDialog = () => {
  visible.value = false
}

// 保存更改
const saveChanges = () => {
  // 发送数据时包含操作类型
  emit('save', {
    ...formData,
    type: dialogType.value
  })
  closeDialog()
}

// 暴露方法给父组件使用
defineExpose({
  showEditDialog,
  showAddDialog
})
</script>

<style scoped>
.edit-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.edit-dialog {
  background: #fff;
  border-radius: 8px;
  width: 600px;
  max-width: 90%;
  max-height: 90%;
  overflow: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.dialog-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.dialog-content {
  padding: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 15px 20px;
  border-top: 1px solid #eee;
}

.dialog-footer .el-button {
  margin-left: 10px;
}
</style>